<script setup lang="ts">
import { ref, watch } from 'vue'
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'

const emit = defineEmits(['update:modelValue'])

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
        required: true
    },
    title: {
        type: String,
        required: true
    },
    subTitle: String,
    height: String || Number,
    zIndex: {
        type: Number,
        default: 999999
    }
})

const show = ref(props.modelValue)

watch(() => props.modelValue, (newValue) => {
    show.value = newValue
})

const onClose = () => {
    emit('update:modelValue', show.value)
}
</script>
<template>
    <TnPopup v-model="show" :z-index="zIndex" :height="height" @close="onClose" close-btn safe-area-inset-bottom
        open-direction="bottom">
        <view class="tn-flex tn-flex-column tn-w-full tn-h-full tn-p-xl">
            <view class="tn-text-xl tn-text-bold">{{ title }}</view>
            <view v-if="subTitle" class="tn-text-xs tn-mt-sm tn-gray_text">{{ subTitle }}</view>
            
            <view class="tn-flex tn-flex-column tn-flex-grow tn-w-full">
                <slot></slot>
            </view>
            
            <view>
                <slot name="bottom"></slot>
            </view>
        </view>
    </TnPopup>
</template>
<style lang="scss" scoped></style>